<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园社团管理系统</title>
    <!-- 引入 Google Fonts 的 Montserrat 字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
    <style>
        /* 使用 Montserrat 字体，设置暖色调背景 */
        body {
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            display: flex;
            min-height: 100vh;
            background-color: #f9f5eb;
        }

        /* 侧边栏样式，使用暖棕色背景 */
        .sidebar {
            width: 220px;
            background-color: #d4a373;
            padding-top: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }

        /* 侧边栏按钮样式 */
        .sidebar button {
            display: block;
            width: 100%;
            padding: 15px 20px;
            text-align: left;
            color: #fefae0;
            background-color: transparent;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
            font-weight: 600;
        }

        /* 侧边栏按钮悬停样式 */
        .sidebar button:hover {
            background-color: #e9edc9;
            color: #d4a373;
        }

        /* 侧边栏激活按钮样式 */
        .sidebar button.active {
            background-color: #faedcd;
            color: #d4a373;
        }

        /* 主内容区域样式 */
        .main-content {
            flex: 1;
            padding: 30px;
        }

        /* 标签内容样式 */
        .tabcontent {
            display: none;
            padding: 20px;
            background-color: #fefae0;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #e9edc9;
            padding: 12px 15px;
            text-align: left;
        }

        th {
            background-color: #e9edc9;
            font-weight: 600;
        }

        /* 按钮样式 */
        button {
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-family: 'Montserrat', sans-serif;
        }

        /* 主要按钮样式 */
        button.btn-primary {
            background-color: #d4a373;
            color: white;
        }

        button.btn-primary:hover {
            background-color: #bc8a5f;
        }

        /* 危险按钮样式 */
        button.btn-danger {
            background-color: #d9534f;
            color: white;
        }

        button.btn-danger:hover {
            background-color: #c9302c;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        /* 模态框内容样式 */
        .modal-content {
            background-color: #fefae0;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 30%;
            border-radius: 8px;
        }

        /* 模态框关闭按钮样式 */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="sidebar">
        <button class="tablinks" onclick="openTab(event, 'Home')">首页</button>
        <button class="tablinks" onclick="openTab(event, 'ClubManagement')">社团信息管理</button>
        <button class="tablinks" onclick="openTab(event, 'MemberManagement')">成员信息管理</button>
        <button class="tablinks" onclick="openTab(event, 'ActivityManagement')">活动信息管理</button>
        <button class="tablinks" onclick="openTab(event, 'AnnouncementManagement')">社团公告管理</button>
        <button class="tablinks" onclick="openTab(event, 'FinanceManagement')">社团财务信息管理</button>
    </div>

    <div class="main-content">
        <div id="Home" class="tabcontent">
            <h2>首页</h2>
            <canvas id="myChart" width="400" height="200"></canvas>
        </div>

        <div id="ClubManagement" class="tabcontent">
            <h2>社团信息管理</h2>
            <button onclick="openAddClubModal()">添加社团</button>
            <table id="clubTable">
                <thead>
                    <tr>
                        <th>社团名称</th>
                        <th>社团简介</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div id="MemberManagement" class="tabcontent">
            <h2>成员信息管理</h2>
            <button onclick="openAddMemberModal()">添加成员</button>
            <table id="memberTable">
                <thead>
                    <tr>
                        <th>成员姓名</th>
                        <th>所属社团</th>
                        <th>联系方式</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div id="ActivityManagement" class="tabcontent">
            <h2>活动信息管理</h2>
            <button onclick="openAddActivityModal()">添加活动</button>
            <table id="activityTable">
                <thead>
                    <tr>
                        <th>活动名称</th>
                        <th>活动时间</th>
                        <th>举办社团</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div id="AnnouncementManagement" class="tabcontent">
            <h2>社团公告管理</h2>
            <button onclick="openAddAnnouncementModal()">添加公告</button>
            <table id="announcementTable">
                <thead>
                    <tr>
                        <th>公告标题</th>
                        <th>公告内容</th>
                        <th>发布社团</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div id="FinanceManagement" class="tabcontent">
            <h2>社团财务信息管理</h2>
            <button onclick="openAddFinanceModal()">添加财务信息</button>
            <table id="financeTable">
                <thead>
                    <tr>
                        <th>收支项目</th>
                        <th>金额</th>
                        <th>所属社团</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <!-- 添加社团模态框 -->
    <div id="addClubModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddClubModal()">&times;</span>
            <h3>添加/修改社团</h3>
            <label for="clubName">社团名称:</label>
            <input type="text" id="clubName" placeholder="请输入社团名称">
            <br>
            <label for="clubDescription">社团简介:</label>
            <input type="text" id="clubDescription" placeholder="请输入社团简介">
            <br>
            <button onclick="saveClub()">保存</button>
        </div>
    </div>

    <!-- 添加成员模态框 -->
    <div id="addMemberModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddMemberModal()">&times;</span>
            <h3>添加/修改成员</h3>
            <label for="memberName">成员姓名:</label>
            <input type="text" id="memberName" placeholder="请输入成员姓名">
            <br>
            <label for="memberClub">所属社团:</label>
            <input type="text" id="memberClub" placeholder="请输入所属社团">
            <br>
            <label for="memberContact">联系方式:</label>
            <input type="text" id="memberContact" placeholder="请输入联系方式">
            <br>
            <button onclick="saveMember()">保存</button>
        </div>
    </div>

    <!-- 添加活动模态框 -->
    <div id="addActivityModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddActivityModal()">&times;</span>
            <h3>添加/修改活动</h3>
            <label for="activityName">活动名称:</label>
            <input type="text" id="activityName" placeholder="请输入活动名称">
            <br>
            <label for="activityTime">活动时间:</label>
            <input type="text" id="activityTime" placeholder="请输入活动时间">
            <br>
            <label for="activityClub">举办社团:</label>
            <input type="text" id="activityClub" placeholder="请输入举办社团">
            <br>
            <button onclick="saveActivity()">保存</button>
        </div>
    </div>

    <!-- 添加公告模态框 -->
    <div id="addAnnouncementModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddAnnouncementModal()">&times;</span>
            <h3>添加/修改公告</h3>
            <label for="announcementTitle">公告标题:</label>
            <input type="text" id="announcementTitle" placeholder="请输入公告标题">
            <br>
            <label for="announcementContent">公告内容:</label>
            <input type="text" id="announcementContent" placeholder="请输入公告内容">
            <br>
            <label for="announcementClub">发布社团:</label>
            <input type="text" id="announcementClub" placeholder="请输入发布社团">
            <br>
            <button onclick="saveAnnouncement()">保存</button>
        </div>
    </div>

    <!-- 添加财务信息模态框 -->
    <div id="addFinanceModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddFinanceModal()">&times;</span>
            <h3>添加/修改财务信息</h3>
            <label for="financeItem">收支项目:</label>
            <input type="text" id="financeItem" placeholder="请输入收支项目">
            <br>
            <label for="financeAmount">金额:</label>
            <input type="text" id="financeAmount" placeholder="请输入金额">
            <br>
            <label for="financeClub">所属社团:</label>
            <input type="text" id="financeClub" placeholder="请输入所属社团">
            <br>
            <button onclick="saveFinance()">保存</button>
        </div>
    </div>

    <script>
        // 初始化表格
        function initTables() {
            // 社团管理
            let clubs = JSON.parse(localStorage.getItem('clubs')) || [];
            let clubTable = document.getElementById('clubTable').getElementsByTagName('tbody')[0];
            clubTable.innerHTML = '';
            clubs.forEach((club, index) => {
                let row = clubTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                cell1.innerHTML = club.name;
                cell2.innerHTML = club.description;
                cell3.innerHTML = `<button onclick="openEditClubModal(${index})">编辑</button><button onclick="deleteClub(${index})">删除</button>`;
            });

            // 成员管理
            let members = JSON.parse(localStorage.getItem('members')) || [];
            let memberTable = document.getElementById('memberTable').getElementsByTagName('tbody')[0];
            memberTable.innerHTML = '';
            members.forEach((member, index) => {
                let row = memberTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = member.name;
                cell2.innerHTML = member.club;
                cell3.innerHTML = member.contact;
                cell4.innerHTML = `<button onclick="openEditMemberModal(${index})">编辑</button><button onclick="deleteMember(${index})">删除</button>`;
            });

            // 活动管理
            let activities = JSON.parse(localStorage.getItem('activities')) || [];
            let activityTable = document.getElementById('activityTable').getElementsByTagName('tbody')[0];
            activityTable.innerHTML = '';
            activities.forEach((activity, index) => {
                let row = activityTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = activity.name;
                cell2.innerHTML = activity.time;
                cell3.innerHTML = activity.club;
                cell4.innerHTML = `<button onclick="openEditActivityModal(${index})">编辑</button><button onclick="deleteActivity(${index})">删除</button>`;
            });

            // 公告管理
            let announcements = JSON.parse(localStorage.getItem('announcements')) || [];
            let announcementTable = document.getElementById('announcementTable').getElementsByTagName('tbody')[0];
            announcementTable.innerHTML = '';
            announcements.forEach((announcement, index) => {
                let row = announcementTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = announcement.title;
                cell2.innerHTML = announcement.content;
                cell3.innerHTML = announcement.club;
                cell4.innerHTML = `<button onclick="openEditAnnouncementModal(${index})">编辑</button><button onclick="deleteAnnouncement(${index})">删除</button>`;
            });

            // 财务信息管理
            let finances = JSON.parse(localStorage.getItem('finances')) || [];
            let financeTable = document.getElementById('financeTable').getElementsByTagName('tbody')[0];
            financeTable.innerHTML = '';
            finances.forEach((finance, index) => {
                let row = financeTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = finance.item;
                cell2.innerHTML = finance.amount;
                cell3.innerHTML = finance.club;
                cell4.innerHTML = `<button onclick="openEditFinanceModal(${index})">编辑</button><button onclick="deleteFinance(${index})">删除</button>`;
            });
        }

        // 打开 tab 页面
        function openTab(evt, tabName) {
            let i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName('tabcontent');
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = 'none';
            }
            tablinks = document.getElementsByClassName('tablinks');
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(' active', '');
            }
            document.getElementById(tabName).style.display = 'block';
            evt.currentTarget.className += ' active';
        }

        // 社团管理
        let currentClubIndex = null;

        function openAddClubModal() {
            currentClubIndex = null;
            document.getElementById('clubName').value = '';
            document.getElementById('clubDescription').value = '';
            document.getElementById('addClubModal').style.display = 'block';
        }

        function openEditClubModal(index) {
            currentClubIndex = index;
            let clubs = JSON.parse(localStorage.getItem('clubs')) || [];
            let club = clubs[index];
            document.getElementById('clubName').value = club.name;
            document.getElementById('clubDescription').value = club.description;
            document.getElementById('addClubModal').style.display = 'block';
        }

        function closeAddClubModal() {
            document.getElementById('addClubModal').style.display = 'none';
        }

        function saveClub() {
            let clubs = JSON.parse(localStorage.getItem('clubs')) || [];
            let name = document.getElementById('clubName').value;
            let description = document.getElementById('clubDescription').value;
            if (name && description) {
                if (currentClubIndex!== null) {
                    clubs[currentClubIndex] = { name, description };
                } else {
                    clubs.push({ name, description });
                }
                localStorage.setItem('clubs', JSON.stringify(clubs));
                initTables();
                closeAddClubModal();
            }
        }

        function deleteClub(index) {
            let clubs = JSON.parse(localStorage.getItem('clubs')) || [];
            clubs.splice(index, 1);
            localStorage.setItem('clubs', JSON.stringify(clubs));
            initTables();
        }

        // 成员管理
        let currentMemberIndex = null;

        function openAddMemberModal() {
            currentMemberIndex = null;
            document.getElementById('memberName').value = '';
            document.getElementById('memberClub').value = '';
            document.getElementById('memberContact').value = '';
            document.getElementById('addMemberModal').style.display = 'block';
        }

        function openEditMemberModal(index) {
            currentMemberIndex = index;
            let members = JSON.parse(localStorage.getItem('members')) || [];
            let member = members[index];
            document.getElementById('memberName').value = member.name;
            document.getElementById('memberClub').value = member.club;
            document.getElementById('memberContact').value = member.contact;
            document.getElementById('addMemberModal').style.display = 'block';
        }

        function closeAddMemberModal() {
            document.getElementById('addMemberModal').style.display = 'none';
        }

        function saveMember() {
            let members = JSON.parse(localStorage.getItem('members')) || [];
            let name = document.getElementById('memberName').value;
            let club = document.getElementById('memberClub').value;
            let contact = document.getElementById('memberContact').value;
            if (name && club && contact) {
                if (currentMemberIndex!== null) {
                    members[currentMemberIndex] = { name, club, contact };
                } else {
                    members.push({ name, club, contact });
                }
                localStorage.setItem('members', JSON.stringify(members));
                initTables();
                closeAddMemberModal();
            }
        }

        function deleteMember(index) {
            let members = JSON.parse(localStorage.getItem('members')) || [];
            members.splice(index, 1);
            localStorage.setItem('members', JSON.stringify(members));
            initTables();
        }

        // 活动管理
        let currentActivityIndex = null;

        function openAddActivityModal() {
            currentActivityIndex = null;
            document.getElementById('activityName').value = '';
            document.getElementById('activityTime').value = '';
            document.getElementById('activityClub').value = '';
            document.getElementById('addActivityModal').style.display = 'block';
        }

        function openEditActivityModal(index) {
            currentActivityIndex = index;
            let activities = JSON.parse(localStorage.getItem('activities')) || [];
            let activity = activities[index];
            document.getElementById('activityName').value = activity.name;
            document.getElementById('activityTime').value = activity.time;
            document.getElementById('activityClub').value = activity.club;
            document.getElementById('addActivityModal').style.display = 'block';
        }

        function closeAddActivityModal() {
            document.getElementById('addActivityModal').style.display = 'none';
        }

        function saveActivity() {
            let activities = JSON.parse(localStorage.getItem('activities')) || [];
            let name = document.getElementById('activityName').value;
            let time = document.getElementById('activityTime').value;
            let club = document.getElementById('activityClub').value;
            if (name && time && club) {
                if (currentActivityIndex!== null) {
                    activities[currentActivityIndex] = { name, time, club };
                } else {
                    activities.push({ name, time, club });
                }
                localStorage.setItem('activities', JSON.stringify(activities));
                initTables();
                closeAddActivityModal();
            }
        }

        function deleteActivity(index) {
            let activities = JSON.parse(localStorage.getItem('activities')) || [];
            activities.splice(index, 1);
            localStorage.setItem('activities', JSON.stringify(activities));
            initTables();
        }

        // 公告管理
        let currentAnnouncementIndex = null;

        function openAddAnnouncementModal() {
            currentAnnouncementIndex = null;
            document.getElementById('announcementTitle').value = '';
            document.getElementById('announcementContent').value = '';
            document.getElementById('announcementClub').value = '';
            document.getElementById('addAnnouncementModal').style.display = 'block';
        }

        function openEditAnnouncementModal(index) {
            currentAnnouncementIndex = index;
            let announcements = JSON.parse(localStorage.getItem('announcements')) || [];
            let announcement = announcements[index];
            document.getElementById('announcementTitle').value = announcement.title;
            document.getElementById('announcementContent').value = announcement.content;
            document.getElementById('announcementClub').value = announcement.club;
            document.getElementById('addAnnouncementModal').style.display = 'block';
        }

        function closeAddAnnouncementModal() {
            document.getElementById('addAnnouncementModal').style.display = 'none';
        }

        function saveAnnouncement() {
            let announcements = JSON.parse(localStorage.getItem('announcements')) || [];
            let title = document.getElementById('announcementTitle').value;
            let content = document.getElementById('announcementContent').value;
            let club = document.getElementById('announcementClub').value;
            if (title && content && club) {
                if (currentAnnouncementIndex!== null) {
                    announcements[currentAnnouncementIndex] = { title, content, club };
                } else {
                    announcements.push({ title, content, club });
                }
                localStorage.setItem('announcements', JSON.stringify(announcements));
                initTables();
                closeAddAnnouncementModal();
            }
        }

        function deleteAnnouncement(index) {
            let announcements = JSON.parse(localStorage.getItem('announcements')) || [];
            announcements.splice(index, 1);
            localStorage.setItem('announcements', JSON.stringify(announcements));
            initTables();
        }

        // 财务信息管理
        let currentFinanceIndex = null;

        function openAddFinanceModal() {
            currentFinanceIndex = null;
            document.getElementById('financeItem').value = '';
            document.getElementById('financeAmount').value = '';
            document.getElementById('financeClub').value = '';
            document.getElementById('addFinanceModal').style.display = 'block';
        }

        function openEditFinanceModal(index) {
            currentFinanceIndex = index;
            let finances = JSON.parse(localStorage.getItem('finances')) || [];
            let finance = finances[index];
            document.getElementById('financeItem').value = finance.item;
            document.getElementById('financeAmount').value = finance.amount;
            document.getElementById('financeClub').value = finance.club;
            document.getElementById('addFinanceModal').style.display = 'block';
        }

        function closeAddFinanceModal() {
            document.getElementById('addFinanceModal').style.display = 'none';
        }

        function saveFinance() {
            let finances = JSON.parse(localStorage.getItem('finances')) || [];
            let item = document.getElementById('financeItem').value;
            let amount = document.getElementById('financeAmount').value;
            let club = document.getElementById('financeClub').value;
            if (item && amount && club) {
                if (currentFinanceIndex!== null) {
                    finances[currentFinanceIndex] = { item, amount, club };
                } else {
                    finances.push({ item, amount, club });
                }
                localStorage.setItem('finances', JSON.stringify(finances));
                initTables();
                closeAddFinanceModal();
            }
        }

        function deleteFinance(index) {
            let finances = JSON.parse(localStorage.getItem('finances')) || [];
            finances.splice(index, 1);
            localStorage.setItem('finances', JSON.stringify(finances));
            initTables();
        }

        // 初始化图表
        function initChart() {
            let ctx = document.getElementById('myChart').getContext('2d');
            let myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['社团数量', '成员数量', '活动数量', '公告数量', '财务记录数量'],
                    datasets: [{
                        label: '数据统计',
                        data: [
                            JSON.parse(localStorage.getItem('clubs'))?.length || 0,
                            JSON.parse(localStorage.getItem('members'))?.length || 0,
                            JSON.parse(localStorage.getItem('activities'))?.length || 0,
                            JSON.parse(localStorage.getItem('announcements'))?.length || 0,
                            JSON.parse(localStorage.getItem('finances'))?.length || 0
                        ],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 205, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 205, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // 添加测试数据
        function addTestData() {
            // 社团管理测试数据
            let clubs = JSON.parse(localStorage.getItem('clubs')) || [];
            if (clubs.length === 0) {
                clubs.push({ name: '音乐社', description: '热爱音乐的同学聚集地' });
                localStorage.setItem('clubs', JSON.stringify(clubs));
            }

            // 成员管理测试数据
            let members = JSON.parse(localStorage.getItem('members')) || [];
            if (members.length === 0) {
                members.push({ name: '张三', club: '音乐社', contact: '13800138000' });
                localStorage.setItem('members', JSON.stringify(members));
            }

            // 活动管理测试数据
            let activities = JSON.parse(localStorage.getItem('activities')) || [];
            if (activities.length === 0) {
                activities.push({ name: '音乐演出', time: '2025-05-01', club: '音乐社' });
                localStorage.setItem('activities', JSON.stringify(activities));
            }

            // 公告管理测试数据
            let announcements = JSON.parse(localStorage.getItem('announcements')) || [];
            if (announcements.length === 0) {
                announcements.push({ title: '音乐社活动通知', content: '本周六举办音乐演出，请各位成员准时参加。', club: '音乐社' });
                localStorage.setItem('announcements', JSON.stringify(announcements));
            }

            // 财务信息管理测试数据
            let finances = JSON.parse(localStorage.getItem('finances')) || [];
            if (finances.length === 0) {
                finances.push({ item: '设备采购', amount: '5000', club: '音乐社' });
                localStorage.setItem('finances', JSON.stringify(finances));
            }

            // 调用初始化表格和图表函数
            initTables();
            initChart();
        }

        // 页面加载完成后初始化表格和图表
        window.onload = function () {
            addTestData();
            initTables();
            initChart();
        };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>

</html>